<template>
    <div class="wrapper">
      <div class="group">
        <text class="label">Time: </text>
        <text class="title">{{value}}</text>
      </div>
      <div class="group">
        <text class="button" @click="pickTime">Pick Time</text>
      </div>
    </div>
  </template>
<script>
const picker = weex.requireModule('picker')
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    pickTime () {
      picker.pickTime({
        value: this.value
      }, event => {
        if (event.result === 'success') {
          this.value = event.data
        }
      })
    }
  }
}
</script>
  <style scoped>
    .wrapper {
      flex-direction: column;
      justify-content: center;
    }
    .group {
      flex-direction: row;
      justify-content: center;
      margin-bottom: 40px;
      align-items: center;
    }
    .label {
      font-size: 40px;
      color: #888888;
    }
    .title {
      font-size: 80px;
      color: #41B883;
    }
    .button {
      font-size: 36px;
      width: 280px;
      color: #41B883;
      text-align: center;
      padding-top: 25px;
      padding-bottom: 25px;
      border-width: 2px;
      border-style: solid;
      border-color: rgb(162, 217, 192);
      background-color: rgba(162, 217, 192, 0.2);
    }
  </style>
